import React from 'react';
import { useIntl } from 'umi';

import Tabs, { TabsProps } from '@/components/Tabs';

import { GLCOverview } from '../components/overviews/GLCOverview';
import { LCOverview } from '../components/overviews/LCOverview';

export const Overview: React.FC = () => {
  const intl = useIntl();
  const items: TabsProps['items'] = [
    {
      key: 'glc',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.glcOverview' }),
      children: <GLCOverview />,
    },
    {
      key: 'lc',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.lcOverview' }),
      children: <LCOverview isGlogbal={true} />,
    },
  ];

  return <Tabs items={items} />;
};
